import React, {memo, useEffect, useState} from 'react';
import SongSheetDetailsStyle from "./IndexStyle";
import {Button, message, Table} from "antd";
import {getHourMineSecondBySecond} from "../../../../utils/timeFormatting";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import MusicCoverItem from "../../../../components/part/musicCoverItem/MusicCoverItem";
import {getMusicCollectDetailsById, getMusicCollectDetailsListById} from "../../../../services/musicCollect";
import {MusicCollect} from "../../../../interface/MusicCollectInterface";
import {format} from "../../../../utils/dateFormat";
import {deleteFavoriteApi, getFavoriteMusicCollectApi, insertFavoriteApi} from "../../../../services/favoriteCount";

/**
 * 歌单详情页
 */
type Props = {
  id: number
};
const SongSheetDetailsCover = memo(function (props: Props) {
  const [cover, setCover] = useState("");
  useEffect(() => {
    getMusicCollectDetailsById(props.id).then((result: any) => {
      setCover(result.data.data.cover);
    }, (error) => {
      console.log(error);
    });
  }, []);
  return (
    <SongSheetDetailsStyle $cover={cover}>
      <div className="song-sheet-details-cover"></div>
    </SongSheetDetailsStyle>
  )
});
const SongSheetDetailsInfo = memo(function (props: Props) {
  const userId: number = parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  const [messageApi, contextHolder] = message.useMessage();
  const [songSheetDetails, setSongSheetDetails] = useState<MusicCollect>();
  const [favoriteCountList, setFavoriteCountList] = useState<MusicCollect[]>([]);

  useEffect(() => {
    getMusicCollectDetailsById(props.id).then((result: any) => {
      console.log(result.data.data);
      setSongSheetDetails(result.data.data);
    }, (error) => {
      console.log(error);
    });
    getFavoriteMusicCollectApi({type: 1, userId}).then((result: any) => {
      setFavoriteCountList(result.data.data.data);
    }, (error) => {
      console.log(error);
    });

  }, []);

  /** 添加收藏 */
  function insertFavoriteBtn() {
    insertFavoriteApi({userId, targetId: songSheetDetails?.musicCollectId, type: 1}).then((result: any) => {
      console.log(result);
      if (result.data.code === 200) {
        messageApi.open({
          type: "success",
          content: "收藏成功"
        });
        //此时再重新请求喜欢的列表
        getFavoriteMusicCollectApi({type: 1, userId}).then((result: any) => {
          setFavoriteCountList(result.data.data.data);
        }, (error) => {
          console.log(error);
        });
      }
    }, (error) => {
      console.log(error);
    });
  }

  /** 取消收藏 */
  function deleteFavoriteBtn() {
    deleteFavoriteApi({userId, targetId: songSheetDetails?.musicCollectId, type: 1}).then((result: any) => {
      console.log(result);
      if (result.data.code === 200) {
        messageApi.open({
          type: "success",
          content: "取消收藏成功"
        });
        //此时再重新请求喜欢的列表
        getFavoriteMusicCollectApi({type: 1, userId}).then((result: any) => {
          setFavoriteCountList(result.data.data.data);
        }, (error) => {
          console.log(error);
        });
      }
    }, (error) => {
      console.log(error);
    });
  }

  return (
    <SongSheetDetailsStyle>
      {contextHolder}
      <div className="info-title">{songSheetDetails?.name}</div>
      <div className="create-username iconfont">&#xe658; &nbsp;&nbsp;{songSheetDetails?.createUserNickname}</div>
      <div className="info-box">
        <div>标签: 背景音乐 流行</div>
        <div>播放量: 102.1万</div>
        <div>收藏量: 3402</div>
        <div>发布时间: {format(songSheetDetails?.createTimer)}</div>
      </div>
      <div className="btn-list-box">
        <Button className="iconfont album-details-btn select-btn">&#xe87c; 播放全部</Button>
        {
          favoriteCountList.some((item) => {
            return item.musicCollectId === songSheetDetails?.musicCollectId
          }) ?
            <Button className="iconfont album-details-btn select-btn"
                    onClick={deleteFavoriteBtn}>&#xe604; 已收藏</Button>
            :
            <Button className="iconfont album-details-btn" onClick={insertFavoriteBtn}>&#xe604; 收藏</Button>
        }
        <Button className="iconfont album-details-btn">&#xe891; 评论(234)</Button>
        <Button className="iconfont album-details-btn">&#xe891; 添加到</Button>
      </div>
    </SongSheetDetailsStyle>
  );
});

const SongSheetDetailsContent = memo(function (props: Props) {
  const {Column} = Table;
  const [musicList, setMusicList] = useState();
  const [songSheetDetails, setSongSheetDetails] = useState<any>();
  useEffect(() => {
    getMusicCollectDetailsListById({pageSize: 5, pageNum: 0, musicCollectId: props.id}).then((result: any) => {
      setMusicList(result.data.data.musicList);
      console.log(result.data.data);
      setSongSheetDetails(result.data.data);
    }, (error) => {
      console.log(error);
    });
  }, []);

  function paginationChange(page: number, pageSize: number) {
    getMusicCollectDetailsListById({
      pageSize: pageSize,
      pageNum: page,
      musicCollectId: props.id
    }).then((result: any) => {
      setMusicList(result.data.data.musicList);
      setSongSheetDetails(result.data.data);
    }, (error) => {
      console.log(error);
    });
  }

  return (
    <SongSheetDetailsStyle>
      <Table dataSource={musicList}
             pagination={{
               defaultPageSize: 5,
               defaultCurrent: 1,
               total: songSheetDetails?.total,
               onChange: (page, pageSize) => {
                 paginationChange(page, pageSize);
               }
             }}
      >
        <Column title="歌曲名称" dataIndex="name" key="musicId"
                render={(_: any, record: any) => {
                  return (<div className="music-name-td">
                    <span className="music-name">{record.name}</span>
                    <span className="music-btn music-play-btn iconfont">&#xe624;</span>
                    <span className="music-btn music-add-btn iconfont">&#xe84f;</span>
                  </div>);
                }}
        />
        <Column title="歌手" dataIndex="singerName" key="musicSinger"/>
        <Column title="专辑" dataIndex="albumName" key="musicAlbum"/>
        <Column title="时长" dataIndex="timer" key="musicTimer"
                render={(_: any, record: any) => {
                  return (<>{getHourMineSecondBySecond(record.timer)}</>)
                }}
        />
      </Table>
    </SongSheetDetailsStyle>
  );
});

const SongSheetDetailsSidebar = memo(function (props: Props) {
  return (
    <SongSheetDetailsStyle>
      <UnitBox title={"推荐歌单"} size={19}>
        <>
          <MusicCoverItem
            size={70}
            timer={200}
            coverUrl={"https://qpic.y.qq.com/music_cover/3jC5p3FicTWGVJGYU3h6Cic6AvSDFnu2054wKkTtfyrRuSTZRhMObibaQ/600?n=1"}
            musicName={"一次就好"}
            style={{fontSize:"18px"}}
          />
          {/*<MusicCoverItem*/}
          {/*    size={70}*/}
          {/*    timer={200}*/}
          {/*    coverUrl={"https://qpic.y.qq.com/music_cover/3jC5p3FicTWGVJGYU3h6Cic6AvSDFnu2054wKkTtfyrRuSTZRhMObibaQ/600?n=1"}/>*/}
          {/*<MusicCoverItem*/}
          {/*    size={70}*/}
          {/*    timer={200}*/}
          {/*    coverUrl={"https://qpic.y.qq.com/music_cover/3jC5p3FicTWGVJGYU3h6Cic6AvSDFnu2054wKkTtfyrRuSTZRhMObibaQ/600?n=1"}/>*/}
        </>
      </UnitBox>
    </SongSheetDetailsStyle>
  );
})

export {SongSheetDetailsCover, SongSheetDetailsInfo, SongSheetDetailsContent, SongSheetDetailsSidebar};
